<template>
    <div class="topbar">
        <div class="left">
            <div class="left-items">
                <img src="../assets/it.png">
                <p1>技术社区</p1>
                <p3>首页</p3>
                <p3>教学空间</p3>
                <p3>互动论坛</p3>
                <p3>技术汇</p3>
            </div>
        </div>
        <div class="right">
            <div class="right-items">
                <p3>你好，陈如权</p3>
                <p3>签到</p3>
                <p3>消息</p3>
                <img src="../assets/touxiang.jpeg" alt="">
            </div>
        </div>
    </div>
</template>               

<script>
export default {
  name: 'ItWebsite',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.topbar{
    background-color: aliceblue;
    height: 5vw;
    width: 100%;
    position: relative;
}
.left img{
    width:3vw;
    height:3vw;
    position: absolute;
}
.left{
    float:left;
    width: 50%;
    height: 5vw;
    align-items: center;
    display: flex;
}
.left p1{
    font-size: 2vw;
    margin-left: 3.5vw;
}
.left p3{
    margin-left: 1.5vw;
}
.left-items{
    margin-left:0.5vw;
   
}
.right{

    float: right;
    width: 50%;
    height: 5vw;
}
.right p3{
    margin-right: 2.5vw;
}
.right img{
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
}
.right-items{
    float:right;
}
</style>